<div>
    <table class="ui  basic compact calendar-table center aligned table" style="border:none;">
        <thead>
            <tr class="navigator">
                <th data-ng-click="addMonth(-1)">
                    <i class="chevron left icon"></i>
                </th>
                <th colspan="5" class="center aligned" style="font-size:1rem;">
                    {{dateText}}
                </th>
                <th data-ng-click="addMonth(1)">
                    <i class="chevron  right icon"></i>
                </th>
            </tr>
            <tr>
                <th data-ng-repeat="date in dayNames">{{date}}</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="list in dayGroups">
                <td data-ng-repeat="day in list" data-ng-class="{'disabled':!day.inMonth,'day':day.inMonth,'teal':day.active}" data-ng-click="selectDate(day)">
                    <span>{{day.dayText}}</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>